<template>
  <div>
    <head-top goBack="true"></head-top>
    <div class="newPlaceholder"></div>

    <div class="head">
      <div class="title flex" v-if="addresslist.length>0">
        <span class="iconfont icon-dingwei"></span>
        <span>收货地址</span>
      </div>

      <div class="detail flexBetween" v-if="addresslist.length>0">
        <div class="flexGrow" @click="popup">
          <div>
            <span>{{ReName}}</span>
            <span>{{RePhone}}</span>
          </div>
          <div>{{ReAddress}}</div>
        </div>
        <span class="iconfont icon-xuanzeqixiayige"></span>
      </div>
      <div class="sendWay flexBetween" @click="goPage('/addressIndex')" v-else>
        <span>+添加收货地址</span>
      </div>
    </div>
    <div class="main flex" v-for="item in selectcartlist" v-bind:key="item.Id">
      <div class="flexCenter">
        <img :src="item.GiftImg" alt>
      </div>
      <div class="flexGrow">
        <div>
          <div>{{item.GiftName}}</div>
          <div>分类：{{item.GiftTypeName}}</div>
        </div>
        <div>
          <span>市场价：{{item.GiftMarketPrice}}</span>
          <span>积分：{{item.IntegralValue}}</span>
          <span style="padding-left:20px"></span>
          <span>数量：{{item.GiftNum}}</span>
        </div>
      </div>
    </div>
    <div class="sendWay flexBetween">
      <span>配送方式：</span>
      <div>
        <span>免邮</span>
        <span>{{sendWay}}</span>
      </div>
    </div>
    <div class="footer flex">
      <div class="flexGrow">
        <div>
          合计：
          <span>{{TotalIntegralValue}}</span>
          <span>积分</span>
        </div>
        <div>可用积分：{{userintegral.AvailableIntegral}}</div>
      </div>
      <div @click="submit">提交</div>
    </div>
    <div class="mask flexCenter" v-if="maskShow">
      <div class="bigCon">
        <div>
          <div class="title">订单提交</div>
          <div class="content">确定提交订单？</div>
        </div>
        <div class="footer_2 flex">
          <div class="flexGrow" @click="cancel">取消</div>
          <div class="flexGrow" @click="confirm">确认</div>
        </div>
      </div>
    </div>


    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      position="bottom"
    >
      <div class="flexBetween">
        <span @click="popup" class="cancel">取消</span>
        <span @click="confirmPopup" class="confirm">确定</span>
      </div>
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
</template>
<script>
  import {Toast, MessageBox, Picker,Popup } from "mint-ui";
  import { getStore } from "../../config/mUtils";



import headTop from "src/components/header/newHead";

export default {
  data() {
    return {
      sendWay: "普通快递",
      TotalIntegralValue: 0,
      maskShow: false,
      selectcartlist: [],
      userinfo: {},
      userintegral: {},
      addresslist: [],
      orderinfo: {},
      addressid: 0,
      UserShopcartList:[],

      popupVisible:false,
      addressArr:[],
      slots: [
        {
          flex: 1,
          values: [],
          className: 'slot',
          textAlign: 'center'
        }
      ],
      ReceiverAddress:'',
      addressArrIndex:'',

      ReAddress:'',
      ReName:'',
      RePhone:'',




    };
  },
  components: {
    headTop,
  },
  methods: {
    popup(){
      this.popupVisible=!this.popupVisible;
    },
    getuseraddress() {
      this.$axios
        .get("get.mc.integraladdress.integraladdress", {
          params: {
            IAid: this.userinfo.Id
          }
        })
        .then(p => {
          this.addresslist = p.data.result;
          this.arr = p.data.result;
          for(var i=0;i<p.data.result.length;i++)
          {
            this.addressArr.push(this.arr[i].Province+this.arr[i].City+this.arr[i].Area+this.arr[i].ReceiverAddress);
          }
          this.slots[0].values=this.addressArr;
          for(var i=0;i<p.data.result.length;i++)
          {
            if(p.data.result[i].F_Default==0)//默认地址
            {
              this.addressid=p.data.result[i].Id;
              this.ReAddress=p.data.result[i].Province+p.data.result[i].City+p.data.result[i].Area+p.data.result[i].ReceiverAddress;
              this.ReName=p.data.result[i].ReceiverName;
              this.RePhone=p.data.result[i].ReceiverPhone;
              break;
            }
            else{
              this.addressid=p.data.result[0].Id;
              this.ReAddress=p.data.result[0].Province+p.data.result[0].City+p.data.result[0].Area+p.data.result[0].ReceiverAddress;
              this.ReName=p.data.result[0].ReceiverName;
              this.RePhone=p.data.result[0].ReceiverPhone;
            }
          }

        });
    },
    confirmPopup(){
      this.addressArrIndex=this.addressArr.indexOf(this.ReceiverAddress);
      this.ReAddress=this.ReceiverAddress;
      this.ReName=this.arr[this.addressArrIndex].ReceiverName;
      this.RePhone=this.arr[this.addressArrIndex].ReceiverPhone;
      this.addressid=this.arr[this.addressArrIndex].Id;
      this.popupVisible=false;
  },
    onValuesChange(picker, values) {
      this.ReceiverAddress=values[0];
    },
    submit() {
      if (!this.addressid) {
          this.maskShow = false;
          Toast({
            message: "亲，请先添加地址哦~",
            iconClass: "iconfont icon-cuo",
            duration: 1000
          });
      }else{
      this.maskShow = true;
      }
    },
    cancel() {
      this.maskShow = false;
    },
    confirm() {
      if (this.userintegral.AvailableIntegral >= this.TotalIntegralValue) {
        if (!this.addressid) {
          this.maskShow = false;
          Toast({
            message: "亲，请先添加地址哦~",
            iconClass: "iconfont icon-cuo",
            duration: 1000
          });
        } else {
          this.orderinfo.EnterpriseId = this.userinfo.EnterpriseId;
          this.orderinfo.InuserId = this.userinfo.Id;
          this.orderinfo.TotalIntegralValue = this.TotalIntegralValue;
          this.orderinfo.AddressId = this.addressid;
          this.selectcartlist.forEach(element => {
            this.UserShopcartList.push({
              GiftTypeId:element.GiftTypeId,
              GiftId:element.GiftId,
              GiftNum:element.GiftNum,
              IntegralValue:element.IntegralValue,
              Id:element.Id
            });
          }); 
          this.orderinfo.GiftList=  this.UserShopcartList;
          this.$axios
            .post("integral.shoppingcart.settlement", this.orderinfo)
            .then(p => {
              this.maskShow = false;
              if (p.data.status == "10001") {
                MessageBox.alert('订单提交成功!').then(action => {
                   this.$router.push({path: '/shopCarIndex'});
              });
              }
              else if(p.data.status == "30019"){
                Toast({
                  message: "库存不足，很抱歉亲~",
                  iconClass: "iconfont icon-cuo",
                  duration: 1000
                });
              }
              else {
                Toast({
                  message: "下单失败，很抱歉亲~",
                  iconClass: "iconfont icon-cuo",
                  duration: 1000
                });
              }
            });
        }
      } else {
        this.maskShow = false;
        Toast({
          message: "很抱歉，您的积分余额不足",
          iconClass: "iconfont icon-cuo",
          duration: 1500
        });
      }
    },
    goPage(path) {
        this.$router.push({
          path: path
        })
    },
    getselectcartlist(cartids) {
      this.$axios
        .get("integral.user.getselectshopcartlist", {
          params: {
            cartids: cartids
          }
        })
        .then(p => {
          this.selectcartlist = p.data.result;
          this.TotalIntegralValue = 0;
          this.selectcartlist.forEach(element => {
            this.TotalIntegralValue += element.IntegralValue * element.GiftNum;
          });
        });
    },
    binduserinfo() {
      this.$axios
        .get("the.integral.statistics", {
          params: {
            InuserId: this.userinfo.Id,
            eid: this.userinfo.EnterpriseId
          }
        })
        .then(p => {
          this.userintegral = p.data.result;
        });
    },
  },
  created() {
    this.userinfo = getStore("userInfo");
    this.binduserinfo();
    if(this.$route.query.type==1){
      this.selectcartlist=JSON.parse(this.$route.query.giftlist);
       this.TotalIntegralValue = 0;
          this.selectcartlist.forEach(element => {
            this.TotalIntegralValue += element.IntegralValue * element.GiftNum;
          });
    }else{
       this.getselectcartlist(this.$route.query.cartids);
    }
    this.getuseraddress();
  }
};
</script>
<style lang="scss" scoped>
  .mint-popup{
    width: 100%;
    .cancel{
      font-size: 0.68rem;
      padding: 0.21rem;
    }
    .confirm{
      font-size: 0.68rem;
      color: #007aff;
      padding: 0.21rem;
    }
  }
.head {
  background-color: white;
  .title {
    padding: 0.434783rem 0.652174rem;
    border-bottom: 1px solid #eee;
    span:nth-child(1) {
      font-size: 0.869565rem;
      color: #fb5d57;
      margin-right: 0.434783rem;
    }
    span:nth-child(2) {
      font-size: 0.695652rem;
    }
  }
  .detail {
    padding: 0.434783rem 0.652174rem;
    > div {
      > div:nth-child(1) {
        > span:nth-child(1) {
          font-size: 0.695652rem;
        }
        > span:nth-child(2) {
          font-size: 0.608696rem;
        }
      }
      > div:nth-child(2) {
        font-size: 0.521739rem;
        color: #888;
      }
    }
    > span {
      color: #999;
    }
  }
}
.main {
  padding: 0.652174rem;
  background-color: white;
  margin: 0.434783rem 0;
  > div:nth-child(1) {
    width: 3.478261rem;
    height: 3.478261rem;
    overflow: hidden;
    margin-right: 0.652174rem;
    img {
      width: 100%;
    }
  }
  > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 3.478261rem;
    > div:nth-child(1) {
      > div:nth-child(1) {
        font-size: 0.608696rem;
      }
      > div:nth-child(2) {
        font-size: 0.521739rem;
        color: #888;
      }
    }
    > div:nth-child(2) {
      font-size: 0.521739rem;
      color: #888;
      > span:nth-child(1) {
        margin-right: 0.217391rem;
      }
    }
  }
}
.sendWay {
  font-size: 0.608696rem;
  padding: 0.434783rem 0.652174rem;
  background-color: white;
  > div {
    > span:nth-child(1) {
      font-size: 0.521739rem;
      background-color: #fb5d57;
      color: white;
      padding: 0.086957rem 0.217391rem;
      border-radius: 0.086957rem;
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f8f8f8;
  > div:nth-child(1) {
    padding-right: 0.434783rem;
    > div {
      text-align: right;
      font-size: 0.521739rem;
    }
    > div:nth-child(1) {
      > span:nth-child(1) {
        font-size: 0.695652rem;
        color: #e51c23;
      }
      > span:nth-child(2) {
        color: #888;
        margin-left: 0.217391rem;
      }
    }
  }
  > div:nth-child(2) {
    width: 3.608696rem;
    height: 2.173913rem;
    line-height: 2.173913rem;
    text-align: center;
    background-color: #fb5d57;
    color: white;
    font-size: 0.608696rem;
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  .bigCon {
    background-color: white;
    width: 11.304348rem;
    border-radius: 0.434783rem;
    > div:nth-child(1) {
      padding: 0.782609rem 1.521739rem 1.521739rem;
      border-bottom: 1px solid #eee;
      > div:nth-child(1) {
        text-align: center;
        font-size: 0.695652rem;
        margin-bottom: 0.434783rem;
      }
      > div:nth-child(2) {
        font-size: 0.608696rem;
      }
    }
    > .footer_2 {
      height: 1.478261rem;
      line-height: 1.478261rem;
      font-size: 0.608696rem;
      > div {
        text-align: center;
        color: #3f51b5;
      }
      > div:nth-child(1) {
        border-right: 1px solid #eee;
      }
    }
  }
}
</style>
